import React, { useState } from "react";
import { Icon } from "antd";

const Lock = ({onChange}) => {
  const [isLock, setIsLock] = useState(true);
  const [isShowAnimation, setShowAnimation] = useState(false);

  const handleSetLock = () => {
      setIsLock(!isLock);
      setShowAnimation(true);
      onChange(isLock);
  };
  const handleEndAnimation = () => {
    setShowAnimation(false);
  };

  let lockClass = "lock ";
  if(isLock) {
      lockClass += "close";
  } else {
      lockClass += "open"
  }

  return (
    <div className="lock-wrapper">
      <div className="switch" onClick={handleSetLock}>
        {isLock ? <Icon type="lock" className="lock-icon" /> : <Icon type="unlock" className="lock-icon" />}
      </div>
      {isShowAnimation ? (
        <div className="lock-switch">
          <div className="lock-container">
            <div className={lockClass} onAnimationEnd={handleEndAnimation}>
              <div className="keyhole"></div>
            </div>
          </div>
        </div>
      ) : (
        null
      )}
    </div>
  );
};

export default Lock;
